<script setup lang="js">
import { ref, onBeforeMount } from "vue";
import ProductSwiper from "../components/ProductSwiper.vue";
import { getCatalogPage } from "@/http/api/catalogApi";
import { getProductPage } from "@/http/api/productApi";

const baseUrl = import.meta.env.VITE_APP_BASE_URL;

const catalogs = ref(null);
const specialProducts = ref(null);
const fetchCatalog = async () => {
  var params = {
    pageNum: 1,
    pageSize: 20,
    withPic: true,
    withProductCount: false,
  };
  getCatalogPage(params).then(value => {
    catalogs.value = value.data.records;
    console.log("分页请求目录成功", catalogs.value);
  }).catch(error => {
    console.log("分页请求目录失败", error);
  });
};

const fetchProductSpecialty = async () => {
  var params = {
    pageNum: 1,
    pageSize: 20,
    withPic: true,
    onlySpecialty: true,
  }
  getProductPage(params).then(value => {
    specialProducts.value = value.data.records;
    console.log("请求主推产品成功", specialProducts.value);
  }).catch(error => {
    console.log("请求主推产品失败", error);
  })
};

const getImageUrl = (url) => {
  return baseUrl + url;
}

onBeforeMount(() => {
  fetchCatalog();
  fetchProductSpecialty();
});
</script>

<template>
  <!--<el-row class="banner-pro">
    <el-col :span="12" class="pro-img-box">
      <img
        src="https://images.ctfassets.net/g2ajhy12bu51/6wMJV0v68vcuNLiOX5NHI9/256da116978721533ba7b363b89df792/hero_placeholder.png"
        alt="" />
    </el-col>
    <el-col :span="12" class="pro-info">
      <p class="pro-act">SPECIAL OFFER</p>
      <p class="pro-name">Sneaker hot drops</p>
      <p class="pro-desc">
        This fashionable sneaker collection features various colors, comfort and
        style.
      </p>
      <p><el-button color="#15803d" size="large">Browse deals</el-button></p>
    </el-col>
  </el-row>
  <h2 class="title-h">Shop by category</h2>-->
  <ul class="category-list" v-if="catalogs != null">
    <li class="category-item">
      <div class="category-img">
        <img :src="getImageUrl(catalogs[0].picPathList[0])" alt="" />
      </div>
      <p class="category-name">{{ catalogs[0].catalogName }}</p>
    </li>
    <li class="category-item">
      <div class="category-img">
        <img :src="getImageUrl(catalogs[1].picPathList[0])" alt="" />
      </div>
      <p class="category-name">{{ catalogs[1].catalogName }}</p>
    </li>
    <li class="category-item">
      <div class="category-img">
        <img :src="getImageUrl(catalogs[2].picPathList[0])" alt="" />
      </div>
      <p class="category-name">{{ catalogs[2].catalogName }}</p>
    </li>
  </ul>
  <div class="banner-grid" v-if="specialProducts != null">
    <el-row class="banner1">
      <el-col :span="12" class="pro-img-box">
        <img :src="getImageUrl(specialProducts[0].picPathList[0])" alt="" />
      </el-col>
      <el-col :span="12" class="pro-info">
        <p class="pro-act">{{ specialProducts[0].productDesc }}</p>
        <p class="pro-name">{{ specialProducts[0].productName }}</p>
        <p class="pro-desc">
          Make your palette pop with our all-new Designer pieces
        </p>
        <p>
          <el-button color="#646464" size="large">Discover now</el-button>
        </p>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="banner2">
          <div class="pro-img-box">
            <img :src="getImageUrl(specialProducts[1].picPathList[0])" alt="" />
          </div>
          <div class="pro-info">
            <p class="pro-act">{{ specialProducts[1].productDesc }}</p>
            <p class="pro-name">{{ specialProducts[1].productName }}</p>
            <p class="pro-desc">Explore our collection of designer shades.</p>
            <p>
              <el-button color="#646464" size="large">Discover now</el-button>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="banner3">
          <div class="pro-img-box">
            <img :src="getImageUrl(specialProducts[2].picPathList[0])" alt="" />
          </div>
          <div class="pro-info">
            <p class="pro-act">{{ specialProducts[2].productDesc }}</p>
            <p class="pro-name">{{ specialProducts[2].productName }}</p>
            <p class="pro-desc">Backpacks for everyday and long trips.</p>
            <p>
              <el-button color="#646464" size="large">Discover now</el-button>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <h2 class="title-h">Inspired by your picks</h2>
  <div style="padding: 0 40px 40px">
    <ProductSwiper></ProductSwiper>
  </div>
</template>
<style lang="scss" scoped>
.banner-pro {
  padding: 0 0 40px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;

  .pro-img-box {
    height: 60rem;
  }
}

.pro-img-box {
  img {
    width: 100%;
    height: 100%;
  }
}

.pro-info {
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .pro-act {
    margin-bottom: 8px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .pro-name {
    margin-bottom: 16px;
    line-height: 40px;
    font-size: 36px;
    font-weight: 500;
  }

  .pro-desc {
    margin-bottom: 24px;
    line-height: 24px;
    font-size: 14px;
  }
}

.title-h {
  margin-bottom: 24px;
  line-height: 40px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

.category-list {
  padding: 20px 40px 40px;
  display: flex;
  justify-content: center;

  .category-item {
    margin: 0 12px 8px;
    width: 19.2rem;
    cursor: pointer;

    .category-img {
      width: 19.2rem;
      height: 19.2rem;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .category-name {
      margin-top: 8px;
      line-height: 24px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
    }
  }
}

.banner-grid {
  padding: 0 40px 40px;
  box-sizing: border-box;

  .banner1 {
    background-color: #ddd6fe;
    margin-bottom: 20px;
    display: flex;

    .pro-img-box {
      height: 72.8rem;
    }
  }

  .banner2 {
    background-color: #fecdd3;

    .pro-info {
      align-items: center;
    }
  }

  .banner3 {
    background-color: #fef08a;

    .pro-info {
      align-items: center;
    }
  }
}
</style>
